<template>
	<view class="outbox">
		<!-- 标题栏 -->
		<view class="title">
			<view @click="back" class="icon"
				style="display: flex;align-items: center;justify-content: center;color: #fff;">
				<image src="../../static/user/back.svg"></image>
				<text>返回</text>
			</view>
			<view style="color: #fff;display: flex;align-items: center;justify-content: center;">
				消息详情
			</view>
		</view>
		<!-- 信息栏 -->
		<view class="info">
			<view class="infoMsg">
				{{state.info.type==1?'系统通知':'绑定申请'}}
			</view>
			<view class="text">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{state.info.msg}}
			</view>
		</view>
		<!-- 按钮栏 -->
		<view class="btnList">
			<view class="btn redBtn" @click="select(false)">
				不同意
			</view>
			<view class="btn blueBtn" @click="select(true)">
				同意
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from "vue";
	const state = reactive({
		info: {},
		token: ''
	})
	onLoad((e) => {
		let obj = JSON.parse(e.obj);
		state.info = obj;
		getToken()
	})
	// 获取token
	const getToken = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
			}
		})
	}
	// 返回上一页
	const back = () => {
		uni.navigateBack()
	}
	// 选择是否同意
	const select = (bol) => {
		if (bol == true) {
			uni.request({
				url: 'http://124.221.162.230:8888/user/bindUsers',
				method: 'POST',
				header: {
					Authorization: state.token
				},
				data: {
					sendId: state.info.sendId,
					objectId: state.info.objectId
				},
				success: (res) => {
					console.log(res)
					deletes()
				}
			})
		} else {
			deletes()
		}
	}
	// 删除该通知
	const deletes = () => {
		uni.request({
			url: 'http://124.221.162.230:8888/sysMsg/deleteMsgById',
			method: 'POST',
			header: {
				Authorization: state.token
			},
			data: {
				msgId: state.info.msgId
			},
			success: (res) => {
				uni.navigateBack({
					delta: 2
				})
			}
		})
	}
</script>

<style lang="less" scoped>
	.outbox {
		width: 100vw;
		height: 100vh;
		background-color: #F4F8F9;

		.title {
			width: 100%;
			height: 160rpx;
			padding-top: var(--status-bar-height);
			background-color: #2A65A7;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: 1fr 2fr 1fr;

			.icon {
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.info {
			margin-top: 30rpx;
			width: calc(100% - 40rpx);
			margin-left: 20rpx;
			height: calc(100vh - 360rpx);
			background-color: #fff;
			border-radius: 16rpx;
			box-shadow: 0 0 2rpx 2rpx #e1e1e1;
			padding: 40rpx;
			box-sizing: border-box;

			.infoMsg {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
			}

			.text {
				margin-top: 20rpx;
				color: #A0A0A0;
			}
		}

		.btnList {
			margin-top: 20rpx;
			width: 100%;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn {
				width: 260rpx;
				height: 110rpx;
				border-radius: 55rpx;
				box-shadow: 0 0 2rpx 2rpx #e1e1e1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
				color: #fff;
			}

			.redBtn {
				background-color: #f89898;
			}

			.redBtn:hover {
				background-color: #c45656;
			}

			.blueBtn {
				background-color: #79bbff;
			}

			.blueBtn:hover {
				background-color: #337ecc;
			}
		}
	}
</style>